<template>
  <div class="app-container">
    <!-- 对话框(添加 / 修改) -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="55%" v-dialogDrag append-to-body>
      <el-form ref="formRef" inline  :model="formData" :rules="formRules" v-loading="formLoading" label-width="140px">
        <el-form-item label="主体编号" prop="makretNo">
          <el-input v-model="formData.makretNo" placeholder="请输入主体编号" />
        </el-form-item>
        <el-form-item label="主体名称" prop="marketName">
          <el-input v-model="formData.marketName" placeholder="请输入主体名称" />
        </el-form-item>
        <el-form-item label="商户手机号" prop="marketPhone">
          <el-input v-model="formData.marketPhone" placeholder="请输入商户手机号" />
        </el-form-item>
        <el-form-item label="经营者" prop="makrketHeader">
          <el-input v-model="formData.makrketHeader" placeholder="请输入经营者" />
        </el-form-item>
        <el-form-item label="数据来源id" prop="dataSourceId">
          <el-select v-model="formData.dataSourceId" placeholder="请选择数据来源id">
            <el-option v-for="dict in this.getDictDatas(DICT_TYPE.DATA_SOURCE_TYPE)" :key="dict.value"
              :label="dict.label" :value="parseInt(dict.value)" />
          </el-select>
        </el-form-item>
        <el-form-item label="营业执照号" prop="marketBusinessLicenseNo" width="125px">
          <el-input v-model="formData.marketBusinessLicenseNo" placeholder="请输入营业执照号" />
        </el-form-item>
        <el-form-item label="七天内是否覆盖" prop="sevenDayCover">
          <el-select v-model="formData.sevenDayCover" placeholder="请选择七天内是否覆盖">
            <el-option v-for="dict in this.getDictDatas(DICT_TYPE.SEVEN_DAY_COVER)" :key="dict.value"
              :label="dict.label" :value="parseInt(dict.value)" />
          </el-select>
        </el-form-item>
        <el-form-item label="营业状态" prop="makrketStatus" width="125px">
          <el-select v-model="formData.makrketStatus" placeholder="请选择营业状态">
            <el-option v-for="dict in this.getDictDatas(DICT_TYPE.BUSINESS_STATUS)" :key="dict.value"
              :label="dict.label" :value="parseInt(dict.value)" />
          </el-select>
        </el-form-item>
        <el-form-item label="经营范围" prop="marketTag">
          <!-- <el-select v-model="formData.marketTag" placeholder="请选择经营范围">
            <el-option v-for="dict in this.getDictDatas(DICT_TYPE.MARKET_SCOPE)" :key="dict.value" :label="dict.label"
              :value="parseInt(dict.value)" />
          </el-select> -->
          <el-input v-model="formData.marketTag" placeholder="请输入经营范围" />
        </el-form-item>
        <el-form-item label="商户地址" prop="marketAdress">
          <el-input v-model="formData.marketAdress" placeholder="请输入商户地址" />
        </el-form-item>
        <!-- <el-form-item label="所属地区" prop="marketAreaId">
          <el-select v-model="formData.marketAreaId" placeholder="请选择所属地区">
            <el-option v-for="dict in areaList.children" :key="dict.id" :label="dict.areaName"
          :value="dict.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="所属市场" prop="marketAffiliationId"  width="125px">
          <TreeSelect style="width: 220px;" v-model="formData.marketAffiliationId"  :options="marketAffiliationTree" :normalizer="normalizer"
        placeholder="请选择所属市场" />
        </el-form-item> -->
        <el-form-item label="市场分类" prop="marketType">
          <el-select v-model="formData.marketType" placeholder="请选择市场分类">
            <el-option v-for="dict in this.getDictDatas(DICT_TYPE.MARKET_TYPE)" :key="dict.value" :label="dict.label"
              :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="身份证正面">
          <ImageUpload v-model="formData.idCardFront" />
        </el-form-item>
        <el-form-item label="身份证背面">
          <ImageUpload v-model="formData.idCardBack" />
        </el-form-item>
        <el-form-item label="营业执照">
          <ImageUpload v-model="formData.marketBusinessLicenseImg" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" :disabled="formLoading">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as InfoApi from '@/api/market/MarketInfo';
import ImageUpload from '@/components/ImageUpload';
// import * as AreaCategoryApi from '@/api/market/areacategory';
import TreeSelect from "@riophae/vue-treeselect";
export default {
  name: "InfoForm",
  components: {
    ImageUpload,
    TreeSelect
  },
  data() {
    return {
      // 弹出层标题
      dialogTitle: "",
      // 是否显示弹出层
      dialogVisible: false,
      // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
      formLoading: false,
      // 表单参数
      formData: {
        id: undefined,
        makretNo: undefined,
        marketName: undefined,
        marketPhone: undefined,
        makrketHeader: undefined,
        idCardFront: undefined,
        idCardBack: undefined,
        dataSourceId: undefined,
        marketBusinessLicenseImg: undefined,
        marketBusinessLicenseNo: undefined,
        sevenDayCover: undefined,
        makrketStatus: undefined,
        marketAdress: undefined,
        marketAreaId: undefined,
        marketAffiliationId: undefined,
        marketTag: undefined,
        marketType: undefined,
      },
      // 表单校验
      formRules: {
      },
    };
  },
  methods: {
    /** 打开弹窗 */
    async open(id) {
      this.dialogVisible = true;
      this.reset();
      // 修改时，设置数据
      if (id) {
        this.formLoading = true;
        try {
          const res = await InfoApi.getInfo(id);
          this.formData = res.data;
          this.title = "修改主体信息";
        } finally {
          this.formLoading = false;
        }
      }
      this.title = "新增主体信息";
    },
    // /** 获得市场区域分类树 */
    // async getAreaCategoryTree() {
    //   this.marketAffiliationTree = [];
    //   const res = await AreaCategoryApi.getAreaCategoryList();
    //   this.areaList.children = this.handleTree(res.data, 'id', 'parentId')
    //   console.log(this.areaList,'地区列表')
    //   const root = { id: 0, areaName: '顶级市场区域分类', children: [] };
    //   root.children = this.handleTree(res.data, 'id', 'parentId')
    //   this.marketAffiliationTree.push(root)
    //   console.log(this.marketAffiliationTree, 111)
    // },
    // /** 转换市场区域分类数据结构 */
    // normalizer(node) {
    //   if (node.children && !node.children.length) {
    //     delete node.children;
    //   }
    //   return {
    //     id: node.id,
    //     label: node['areaName'],
    //     children: node.children
    //   };
    // },
    /** 提交按钮 */
    async submitForm() {
      // 校验主表
      await this.$refs["formRef"].validate();
      this.formLoading = true;
      try {
        const data = this.formData;
        // 修改的提交
        if (data.id) {
          await InfoApi.updateInfo(data);
          this.$modal.msgSuccess("修改成功");
          this.dialogVisible = false;
          this.$emit('success');
          return;
        }
        // 添加的提交
        await InfoApi.createInfo(data);
        this.$modal.msgSuccess("新增成功");
        this.dialogVisible = false;
        this.$emit('success');
      } finally {
        this.formLoading = false;
      }
    },
    /** 表单重置 */
    reset() {
      this.formData = {
        id: undefined,
        makretNo: undefined,
        marketName: undefined,
        marketPhone: undefined,
        makrketHeader: undefined,
        idCardFront: undefined,
        idCardBack: undefined,
        dataSourceId: undefined,
        marketBusinessLicenseImg: undefined,
        marketBusinessLicenseNo: undefined,
        sevenDayCover: undefined,
        makrketStatus: undefined,
        marketAdress: undefined,
        marketAreaId: undefined,
        marketAffiliationId: undefined,
        marketTag: undefined,
        marketType: undefined,
      };
      this.resetForm("formRef");
    }
  }
};
</script>
